<template>
  <div class="home">
    <div id="map"></div>
  </div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import EChartsLayer from "ol-echarts";
import { transform } from "ol/proj";
import gisApi from "../../gisApi";
export default {
  data() {
    return {
      map: null,
      data: [
        {
          name: "第一社区",
          value: 8,
        },
        {
          name: "第二社区",
          value: 4,
        },
        {
          name: "第三社区",
          value: 9,
        },
        {
          name: "第四社区",
          value: 2,
        },
        {
          name: "第五社区",
          value: 11,
        },
        {
          name: "第六社区",
          value: 7,
        },
      ],
      geoCoordMap: {
        第一社区: [12727733.392080443, 3568706.308521112],
        第二社区: [12729705.467351884, 3568954.728863039],
        第三社区: [12727572.874146093, 3566627.2212934387],
        第四社区: [12729147.477103718, 3566417.019465654],
        第五社区: [12726495.112018114, 3567387.769783193],
        第六社区: [12731562.11067985, 3565503.59691933],
      },
    };
  },
  mounted() {
    this.mapInit();
    this.echartInit();
  },
  methods: {
    //数据转化
    convertData(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.geoCoordMap[data[i].name];
        geoCoord = transform(geoCoord, "EPSG:3857", "EPSG:4326");
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
          });
        }
      }
      console.log(res)
      return res;
    },
    //初始化地图
    mapInit() {
      var source = new XYZ({
        url: gisApi.layerConfig.tileUrl,
      });
      this.map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: source,
          }),
        ],
        view: new View({
          projection: "EPSG:3857",
          extent: gisApi.mapConfig.extent,
          center: gisApi.mapConfig.center,
          minZoom: 1,
          maxZoom: 19,
          zoom: 15,
        }),
      });
    },
    //初始化echarts
    echartInit() {
      var option = {
        title: {
          text: "社区统计",
          subtext: "data from test",
          sublink: "http://www.baidu.com",
          left: "center",
          textStyle: {
            color: "red",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          y: "top",
          x: "right",
          data: ["社区统计Top5", "全部社区统计"],
          textStyle: {
            color: "#red",
          },
        },
        series: [
          {
            name: "全部社区统计",
            type: "effectScatter",
            data: this.convertData(this.data),
            symbolSize: (val) => {
              console.log(val)
              return val[2] * 5;
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true,
              },
              emphasis: {
                show: true,
              },
            },
            hoverAnimation: true,
            tooltip: {
              trigger: "item",
              formatter: function (val) {
                return `<p>${val.data.name}</p><p><span>数量:</span>${val.data.value[2]}</p>`;
              },
            },
            itemStyle: {
              normal: {
                color: "red",
              },
            },
            zlevel: 1,
          },
          {
            name: "社区统计Top5",
            type: "effectScatter",
            data: this.convertData(
              this.data
                .sort(function (a, b) {
                  return b.value - a.value;
                })
                .slice(0, 5)
            ),
            symbolSize: (val) => {
              return val[2] * 5;
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true,
              },
            },
            tooltip: {
              trigger: "item",
              formatter: function (val) {
                return `<p>${val.data.name}</p><p><span>数量:</span>${val.data.value[2]}</p>`;
              },
            },
            itemStyle: {
              normal: {
                color: "red",
                shadowBlur: 10,
                shadowColor: "#333",
              },
            },
            zlevel: 1,
          },
        ],
      };
      var echartslayer = new EChartsLayer(option, {
        hideOnMoving: true,
        forcedRerender:true
      });
      echartslayer.appendTo(this.map);
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  height: 100%;
}
#map {
  height: 100%;
}
</style>
